(function(){ 

  var digit=
   [
       [
           [0,0,1,1,1,0,0],
           [0,1,1,1,1,1,0],
           [1,1,1,0,1,1,1],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,1,0,1,1,1],
           [0,1,1,1,1,1,0],
           [0,0,1,1,1,0,0]
       ],//0
       [
           [0,0,0,1,1,0,0],
           [0,0,1,1,1,0,0],
           [0,1,1,1,1,0,0],
           [0,0,0,1,1,0,0],
           [0,0,0,1,1,0,0],
           [0,0,0,1,1,0,0],
           [0,0,0,1,1,0,0],
           [0,0,0,1,1,0,0],
           [0,0,0,1,1,0,0],
           [0,0,0,1,1,0,0],
           [1,1,1,1,1,1,1],
           [1,1,1,1,1,1,1]
       ],//1
       [
           [0,0,1,1,1,1,0],
           [0,1,1,1,1,1,1],
           [1,1,0,0,0,1,1],
           [0,0,0,0,0,1,1],
           [0,0,0,0,1,1,0],
           [0,0,0,1,1,0,0],
           [0,0,1,1,0,0,0],
           [0,1,1,0,0,0,0],
           [1,1,0,0,0,0,0],
           [1,1,0,0,0,1,1],
           [1,1,1,1,1,1,1],
           [1,1,1,1,1,1,1]
       ],//2
       [
           [0,1,1,1,1,1,0],
           [1,1,1,1,1,1,1],
           [1,1,0,0,0,1,1],
           [0,0,0,0,0,1,1],
           [0,0,0,0,1,1,0],
           [0,0,1,1,1,0,0],
           [0,0,1,1,1,0,0],
           [0,0,0,0,1,1,0],
           [0,0,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,1,1,1,1,0],
           [0,1,1,1,1,0,0]
       ],//3
       [
           [0,0,0,0,1,1,0],
           [0,0,0,0,1,1,0],
           [0,0,0,1,1,1,0],
           [0,0,1,1,1,1,0],
           [0,1,1,0,1,1,0],
           [1,1,0,0,1,1,0],
           [1,1,1,1,1,1,1],
           [1,1,1,1,1,1,1],
           [0,0,0,0,1,1,0],
           [0,0,0,0,1,1,0],
           [0,0,0,1,1,1,1],
           [0,1,1,1,1,1,1]
       ],//4
       [
           [0,1,1,1,1,1,0],
           [1,1,1,1,1,1,1],
           [1,1,0,0,0,0,0],
           [1,1,0,0,0,0,0],
           [1,1,0,0,0,0,0],
           [1,1,1,1,1,1,0],
           [0,1,1,1,1,1,1],
           [0,0,0,0,0,1,1],
           [0,0,0,0,0,1,1],
           [0,0,0,0,0,1,1],
           [1,1,1,1,1,1,1],
           [0,1,1,1,1,1,0]
       ],//5
       [
           [0,0,0,0,1,1,0],
           [0,0,0,1,1,1,0],
           [0,0,1,1,0,0,0],
           [0,1,1,0,0,0,0],
           [1,1,0,0,0,0,0],
           [1,1,0,1,1,1,0],
           [1,1,1,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [0,1,1,1,1,1,0],
           [0,0,1,1,1,0,0]
       ],//6
       [
           [1,1,1,1,1,1,1],
           [1,1,1,1,1,1,1],
           [1,1,0,0,0,1,1],
           [0,0,0,0,1,1,0],
           [0,0,0,0,1,1,0],
           [0,0,0,1,1,0,0],
           [0,0,0,1,1,0,0],
           [0,0,1,1,0,0,0],
           [0,0,1,1,0,0,0],
           [0,0,1,1,0,0,0],
           [0,0,1,1,0,0,0],
           [0,0,1,1,0,0,0]
       ],//7
       [
           [0,1,1,1,1,1,0],
           [1,1,1,1,1,1,1],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [0,1,1,1,1,1,0],
           [0,1,1,1,1,1,0],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,1,1,1,1,1],
           [0,1,1,1,1,1,0]
       ],//8
       [
           [0,1,1,1,1,1,0],
           [1,1,1,1,1,1,1],
           [1,1,0,0,0,1,1],
           [1,1,0,0,0,1,1],
           [1,1,1,0,0,1,1],
           [0,1,1,1,0,1,1],
           [0,0,0,0,0,1,1],
           [0,0,0,0,0,1,1],
           [0,0,0,0,1,1,0],
           [0,0,0,1,1,0,0],
           [0,1,1,1,0,0,0],
           [0,1,1,0,0,0,0]
       ],//9
       [
           [0,0,0,0,0,0,0],
           [0,0,0,0,0,0,0],
           [0,0,1,1,1,0,0],
           [0,0,1,1,1,0,0],
           [0,0,1,1,1,0,0],
           [0,0,0,0,0,0,0],
           [0,0,0,0,0,0,0],
           [0,0,1,1,1,0,0],
           [0,0,1,1,1,0,0],
           [0,0,1,1,1,0,0],
           [0,0,0,0,0,0,0],
           [0,0,0,0,0,0,0]
       ]//:
   ];

var canvas = document.getElementById('canvas');

if(canvas.getContext){
   var cxt = canvas.getContext('2d');
   //声明canvas的宽高
   var H = 100,W = 700;
   canvas.height = H;
   canvas.width = W;
   canvas.style.background = '#000'
   canvas.style.padding = '10px'  
   cxt.fillStyle = '#fff';
   cxt.fillRect(10,10,50,50);        

   //存储时间数据
   var data = [];
   //存储运动的小球
   var balls = [];
   //设置粒子半径
   var R = canvas.height/20-1;
   (function(){
       var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
       //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
       data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);    
   })();

   /*生成点阵数字*/
   function renderDigit(index,num){
       for(var i = 0; i < digit[num].length; i++){
           for(var j = 0; j < digit[num][i].length; j++){
               if(digit[num][i][j] == 1){
                   cxt.beginPath();
                   cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                   cxt.closePath();
                   cxt.fill();
                   cxt.fillStyle = '#fff';
               }
           }
       }        
   }

   /*更新时钟*/
   function updateDigitTime(){
       var changeNumArray = [];
       var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
       var NewData = [];
       NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
       for(var i = data.length-1; i >=0 ; i--){
           //时间发生变化 
           if(NewData[i] !== data[i]){
               //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
               changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
           }
       }
       //增加小球
       for(var i = 0; i< changeNumArray.length; i++){
           addBalls.apply(this,changeNumArray[i].split('_'));
       }    
       data = NewData.concat();
   }

   /*更新小球状态*/
   function updateBalls(){
       for(var i = 0; i < balls.length; i++){
           balls[i].stepY += balls[i].disY;
           balls[i].x += balls[i].stepX;
           balls[i].y += balls[i].stepY;    
           if(balls[i].x > W + R || balls[i].y > H + R){
               balls.splice(i,1);
               i--;
           }                
       }
   }

  //  获取一个随机的颜色值
   function getRandomColor(){
    var colorUnit = '0123456789ABCDEF';
    var color = "#"
    var colorArr = [];
    for (var i = 0; i < 6; i++) {
      var randomIndex = Math.floor(Math.random()*15)
      colorArr.push(colorUnit[randomIndex])
    }
    return color+colorArr.join('')
   }

   /*增加要运动的小球*/
   function addBalls(index,num){
       var numArray = [1,2,3];
       var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
       for(var i = 0; i < digit[num].length; i++){
           for(var j = 0; j < digit[num][i].length; j++){
               if(digit[num][i][j] == 1){
                  console.log('获取一个随机的颜色值  getRandomColor',getRandomColor())
                   var ball = {
                       x:14*(R+2)*index + j*2*(R+1)+(R+1),
                       y:i*2*(R+1)+(R+1),
                       stepX:Math.floor(Math.random() * 4 -2),
                       stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
                       color:getRandomColor(),
                       disY:1
                   };
                   balls.push(ball);            
               }
           }
       }    
   }

   /*渲染*/
   function render(){
       //重置画布宽度，达到清空画布的效果
       canvas.height = 240;
       //渲染时钟
       for(var i = 0; i < data.length; i++){
           renderDigit(i,data[i]);
       }        
       //渲染小球
       for(var i = 0; i < balls.length; i++){
           cxt.beginPath();
           cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
           cxt.fillStyle = balls[i].color;
           cxt.closePath();
           cxt.fill();                
       }
   }

   clearInterval(oTimer);
   var oTimer = setInterval(function(){
       //更新时钟
       updateDigitTime();
       //更新小球状态
       updateBalls();
       //渲染
       render();
   },50);
}
   
})();



